﻿@*@using CultuRAM.Models*@
@using System.Globalization
@model CultuRAM.Models.Event
@*@model PagedList.IPagedList<CultuRAM.Models.Event>*@


@using (Ajax.BeginForm("Edit", "Event", new AjaxOptions
{
    UpdateTargetId = "tabEventGeral",
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
}, new { id = "formCreateEvent" }))
{
    
    <table style="width: 100%; border: 0; border-color: #000000; border-style:solid">
        <tr style="width: 70%">
            <!-- LEFT SIDE -->
            <td style="vertical-align: top">         
                @Html.ValidationSummary(false)
                @Html.HiddenFor(model => model.EventId)
@*                @Html.HiddenFor(model => model.EventType)
                @Html.HiddenFor(model => model.Entity)*@
                <table>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Title)</div>
                        </td>
                        <td>
                            <div class="controls">
                                @*@Html.EditorFor(model => model.Title, null,null)*@
                                @Html.TextBoxFor(model => model.Title, new { @class = "input-xxlarge" })
                                @*@Html.ValidationMessageFor(model => model.Title)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.StartDate)</div>
                        </td>
                        <td>
                            <div id="datetimepickerStart"  class="controls input-append date">
                                @Html.TextBoxFor(model => model.StartDate, new { @Value = Model.StartDate.ToString("dd/MM/yyyy HH:mm", CultureInfo.InvariantCulture), @style = "width: 125px;" })
                                @*@Html.EditorFor(model => model.StartDate)*@
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                                @*@Html.ValidationMessageFor(model => model.StartDate)*@
                            </div>
                        </td>

                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.EndDate)</div>
                        </td>
                        <td>
                            <div id="datetimepickerEnd"  class="controls input-append date">
                                @Html.TextBoxFor(model => model.EndDate, new { @Value = Model.EndDate.ToString("dd/MM/yyyy HH:mm", CultureInfo.InvariantCulture), @style = "width: 125px;" })
                                @*@Html.EditorFor(model => model.EndDate)*@
                                <span class="add-on">
                                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                </span>
                                @*@Html.ValidationMessageFor(model => model.EndDate)*@
                            </div>
                        </td>

                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Duration)</div>

                        </td>
                        <td>
                            <div class="controls input-append">
                                @Html.TextBoxFor(model => model.Duration, new { @style = "width: 69px" })
                                <span class="add-on">
                                    Ex.: 30 min.
                                </span>
                                @* @Html.ValidationMessageFor(model => model.Duration)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Public)</div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.EditorFor(model => model.Public)
                                @*@Html.ValidationMessageFor(model => model.Public)*@
                            </div>
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.EventType)  </div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.DropDownList("EventTypeId", (SelectList)ViewBag.EventTypeIdDdl, String.Empty)
@*                              @Html.DropDownListFor(model => model.EventTypeId, (SelectList)ViewBag.EventTypeIdDdl, String.Empty , new { id = "EventTypeId" })*@
                                @*@Html.DropDownList("EventTypeId")*@
                                @*@Html.DropDownList("EventTypeId", (IEnumerable<SelectListItem>)ViewBag.EventTypeId)*@
                                @*@Html.DropDownListFor(model => model.EventTypeId, (SelectList)ViewBag.EventTypeId, String.Empty)*@              
                                    
                                @*@Html.ValidationMessageFor(model => model.EventTypeId)*@
                                @*<button id="addType" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModalAdd"  onclick="javascript: clearField();">A</button>
                                    <button id="editType" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myModalEdit">E</button>*@
                            </div> 
                        </td>
                    </tr>
                    <tr class="control-group">
                        <td>
                            <div>@Html.LabelFor(model => model.Entity)  </div>
                        </td>
                        <td>
                            <div class="controls">
                                @Html.DropDownList("EntityId", (SelectList)ViewBag.EntityIdDdl, String.Empty)
@*                                @Html.DropDownListFor(model => model.EntityId, (SelectList)ViewBag.EntityIdDdl, String.Empty , new { id = "EntityId" })*@
                                @*@Html.DropDownList("EntityId", String.Empty)*@
                                @*@Html.DropDownList("EntityId", (IEnumerable<SelectListItem>)ViewBag.EntityId)*@
                                @*@Html.DropDownListFor(model => model.Entity, (SelectList)ViewBag.EntityId, String.Empty)*@      
                                @*@Html.ValidationMessageFor(model => model.EntityId)*@
                            </div> 
                        </td>
                    </tr>
                </table>
              
            </td>
            <!-- RIGHT SIDE -->
            <td style="width: 30%; vertical-align: top">     
                &nbsp;<br/>
                <div class="editor-label">@Html.LabelFor(model => model.Poster)</div>
                <div style=" width: 230px; height: 200px; border:1px solid; text-align: center; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;">
                    <img src="@Model.Poster" id="ImgPoster" alt="Cartaz" style="height: 200px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;"/><br/>
                </div><br/>
                <div class="editor-field">
                    @Html.HiddenFor(model => model.Poster)
                </div>
                @*<input id="bannerImage" name="bannerImage" type="file" class=""><br/>*@
                
                <div style="position:relative;">
                    <a class='btn btn-sm' href='javascript:;' style="width: 105px;"><i class="icon-search"></i>&nbsp;Procurar
                        <input type="file" class="BtnInputFile" id="bannerImage" style="width: 105px;" name="bannerImage" onchange='$("#upload-file-info").html($(this).val());' >
                    </a>
                    &nbsp;
                    @*<span class='label label-info' id="upload-file-info" style="height:24px; position:relative; top:-4px; left: -5px;"> Selecione um ficheiro... &nbsp;</span>*@
                    
                    <button type="button" Value="Add" class="btn btn-success btn-sm" onclick="javascript: uploadFile();"><i class="icon-plus icon-white"></i></button> 
                    <button type="button" Value="Del" class="btn btn-danger btn-sm"  onclick="javascript: deleteFile();"><i class="icon-remove icon-white"></i></button>
                </div>         
            </td>
        </tr>
    </table>

}



<!-- Modal -->
<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Adicionar um novo Tipo de Evento</h4>
      </div>
      <div class="modal-body">
         @*@Html.Action("AddEventTypePv")*@
      </div>    
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal -->
<div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel1">Editar o Tipo de Evento</h4>
      </div>
      <div class="modal-body">
         @*@Html.Action("EditEventTypePv",new { id=Model.EventTypeId })*@
      </div>    
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 

<script type="text/javascript">
       
    //Upload Poster Image File
    function uploadFile() {
        var bannerImage = $("#bannerImage").val();

        if (bannerImage) {
            var file = document.getElementById('bannerImage').files[0];
            var formData = new FormData();
            formData.append(file.name, file);
            formData.append("eventId", @(Model.EventId));
            
            var xhr = new XMLHttpRequest();
            var url = "@Url.Action("UpdatePosterImage", "Event")";
            xhr.open('POST', url, true);
            xhr.onload = function(e) {
                var response = $.parseJSON(e.target.response);
                $("#ImgPoster").attr("src", response.path);
                $("#Poster").attr("value",response.path);
            };

            xhr.send(formData); // multipart/form-data

        } else {
            //alert("Nenhum ficheiro encontrado!");
            bootbox.alert("Nenhum ficheiro encontrado!", function() {
                console.log("Alert Callback");
            });
        }
    }
    
    //Delete Poster Image File
    function deleteFile() {

        var formData = new FormData();
        formData.append("EventId", @(Model.EventId));
            
        var xhr = new XMLHttpRequest();
        var url = "@Url.Action("DeletePosterImage", "Event")";
        xhr.open('POST', url, true);
        xhr.onload = function (e) {
            var response = $.parseJSON(e.target.response);
            $("#ImgPoster").attr("src",response.path);
            $("#Poster").attr("value",response.path);
            $("#bannerImage").attr({ value: '' }); 
        };

        xhr.send(formData);  // multipart/form-data

    }
    
    function clearField() {
        $("#Type").attr("value", "");
        $("#SuperTypeId1").prepend("<option value=''>Selecione um tipo</option>");
        $("#SuperTypeId1 :first-child").attr("selected", true);
    }
</script>


@*  @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/culturam")*@